<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
</head>
<body>
<div id="app">
    姓:<input type="text" v-model="firstName">
    名:<input type="text" v-model="lastName">
<!--    第一种写法 不用换使用js拼接,数据在模板中this全部指向vm只不过this是可以省略的-->
<!--    <p>{{this.firstName+'-'+this.lastName}}</p>-->
    <p>{{firstName+'-'+lastName}}</p>
<!--    第二种方法不用 封装函数去写-->
    <p>{{getFullName()}}</p>
<!--第三种方法重要.计算属性-->
    <p>{{fullName}}</p>
<!--    第4种方法 watch监视-->
    <p>{{fullName2}}</p>
<!--   下面是测试computed和watch在同步和异步的应用-->
    <p>{{fullName3}}</p>
    <p>{{fullName4}}</p>
    <input type="text" v-model="fullName">
</div>
<script src="js/vue.js"></script>
<script>
    const vm=new Vue({
        el:'#app',
        data(){
            return {
                firstName:'zhao',
                lastName:'liying',
                fullName2:"",//监视的时候必须有这个属性 属性值是什么不确定,后面根据监视去给它赋值
                fullName4:""
            };
        },
        methods:{
            getFullName(){
                //在vue中所有的函数内部的this都指向vm因为这些方法或者函数都会被vm代理
                return this.firstName+"-"+this.lastName;
            }
        },
        //当我们需要一个数据,但是这个数据我又没有,并且这个数据由目前我有的数据计算得来,那就要计算属性
        computed:{
           fullName:{
                //计算属性的完整写法
                get(){
                    return this.firstName+"-"+this.lastName;
                },
                //当计算属性的数据被修改时调用(表单类元素在双向绑定计算属性值)
                set(val){
                    let  arr=val.split('-');
                    this.firstName=arr[0];
                    this.lastName=arr[1];
                },

           },
            //如果计算属性当中只有get方法,那么我们可以简写为如下写法
            // fullName(){
            //     return this.firstName+"-"+this.lastName;
            // },
            fullName3(){
                //computed内部只能是同步数据 异步拿不到
                let a=null;
                setInterval(()=>{
                    a='嘿嘿';
                },1000);
            return a;
            }
        },

        // 使用方法去获取姓名和使用计算属性去计算姓名的区别（贼重要）
        // 对于方法调用：
        //你使用了几次方法调用，那么这个方法被调用了几次
        // 对于计算属性
        //你使用了不管多少次计算属性，计算属性的get方法只调用了一次
        //计算属性一定存在缓存，这样有缓存使用多次的时候效率比使用方法高的多
        watch:{
            firstName: {
                //firstName是监视对象 handler是固定写法 是一个配置对象
                //当数据发生改变的时候会自动调用handler回调函数
                handler(newVal,oldVal){
                  this.fullName2=newVal+"-"+this.lastName;
                  //
                  setInterval(()=>{
                      this.fullName4="呵呵";
                  },1000)
                },
                immediate:true// /ɪˈmiːdiət/ 立即的；直接的；最接近的
                // 配置项无论监视的属性发生不发生任何的变化 都要强制的执行一次回调
            }
        }
    });
    vm.$watch('lastName',function (newVal,oldVal){
        //this决定了是否可以使用箭头函数
        this.fullName2=this.firstName+"-"+newVal;
    });
//computed 是计算属性 一般是没有这个是但是想要用这个值,那么根据自己已有的做去计算
// watch   是监视属性,监视的属性已有后期要更改的属性必须有
    //通常用computed的场合都可以使用watch去解决,但是能用watch解决的computed不一定能解决
    //computed函数当中只能使用同步,而computed同步异步都可以
</script>
</body>
</html>